<template>
    <div>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media" v-for="item in newList" :key="item.id">
                <router-link :to="'/home/newInfo/' + item.id">
                    <img class="mui-media-object mui-pull-left" :src="item.url">
                    <div class="mui-media-body">
                        <h1>{{item.title}}</h1>
                        <p class='mui-ellipsis'>
                            <span>发表时间: {{item.time | dateFormat}}</span>
                            <span>点击: {{item.count}}次</span>
                        </p>
                    </div>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                newList: [
                    {id: 1, url: '/images/1.jpg', title: '哈哈', time: new Date(), count: 1},
                    {id: 2, url: '/images/2.jpg', title: '嘻嘻', time: new Date(), count: 2},
                    {id: 3, url: '/images/3.jpg', title: '蹦蹦', time: new Date(), count: 3}
                ]
            }
        }
    }
</script>

<style scoped>
    .mui-media-body h1 {
        font-size: 14px;
    }

    .mui-media-body .mui-ellipsis {
        font-size: 12px;
        color: #226aff;
        display: flex;
        justify-content: space-between;
    }
</style>